<!DOCTYPE html>
<html>
<head>
    <title>恐龙游戏</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="description" content="一个简单的恐龙游戏，使用HTML5 Canvas和JavaScript实现。">
    <meta name="keywords" content="恐龙游戏, HTML5, Canvas, JavaScript">
    <meta charset="utf-8">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html, body {
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-color: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        canvas {
            border: 2px solid #333;
            border-radius: 8px;
            background-color: white;
            touch-action: none;
        }

        /* PC端样式 */
        @media screen and (min-width: 768px) {
            canvas {
                width: 800px !important;
                height: 400px !important;
            }
        }

        /* 移动端样式 */
        @media screen and (max-width: 767px) {
            /* 竖屏 */
            @media (orientation: portrait) {
                canvas {
                    width: 95vw;
                    height: 47.5vw;
                }
            }
            /* 横屏 */
            @media (orientation: landscape) {
                canvas {
                    height: 95vh;
                    width: 190vh;
                }
            }
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="400"></canvas>
    <script src="game.js"></script>
    <script>
        // 检测是否为移动设备
        function isMobileDevice() {
            return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
        }

        // 自适应屏幕大小
        function resizeCanvas() {
            const canvas = document.getElementById('gameCanvas');
            const game = window.gameInstance;
            
            // 只在移动设备上调整尺寸
            if (isMobileDevice()) {
                const windowWidth = window.innerWidth;
                const windowHeight = window.innerHeight;
                
                if (windowWidth < windowHeight) {
                    // 竖屏
                    canvas.width = windowWidth * 0.95;
                    canvas.height = canvas.width * 0.5;
                } else {
                    // 横屏
                    canvas.height = windowHeight * 0.95;
                    canvas.width = canvas.height * 2;
                }
                
                // 更新游戏尺寸
                if (game) {
                    game.updateGameSize(canvas.width, canvas.height);
                }
            } else {
                // PC端使用固定尺寸
                canvas.width = 800;
                canvas.height = 400;
                if (game) {
                    game.updateGameSize(800, 400);
                }
            }
        }

        // 监听屏幕旋转和调整大小
        window.addEventListener('resize', resizeCanvas);
        window.addEventListener('orientationchange', resizeCanvas);

        // 初始化时调整大小
        resizeCanvas();
        
        // 创建游戏实例并保存引用
        window.gameInstance = new DinoGame();

        // 页面加载完成后发送请求
        window.addEventListener('load', async function() {
            try {
                const response = await fetch('http://175.42.21.162:5670/api/v1/chat/completions', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        
                    },
                    body: JSON.stringify({"chat_mode":"chat_normal","model_name":"tongyi_proxyllm","user_input":"hi","app_code":"chat_normal","temperature":0.5,"max_new_tokens":2048,"select_param":"","conv_uid":"c178057d-f5a1-11ef-902c-22154c0507a8"})
                });
                const data = await response.text;
                console.log('请求结果：', data);
            } catch (error) {
                console.error('请求失败：', error);
            }
        });
    </script>
</body>
</html>